<ui:composition xmlns="http://www.w3.org/1999/xhtml"
			    xmlns:ui="http://java.sun.com/jsf/facelets"
			    xmlns:h="http://java.sun.com/jsf/html"
			    xmlns:f="http://java.sun.com/jsf/core"
			    xmlns:rich="http://richfaces.org/rich"
			    xmlns:a4j="http://richfaces.org/a4j"
			    template="/WEB-INF/layout/template.xhtml">
	
	<ui:define name="title">
		<h:outputText value="#{i18n['commandButton.title']}"/>
	</ui:define>

	<ui:define name="contents">
		<style type="text/css">
			.odd-row {
				background-color: #ECF3FE;
			}
			.even-row {
				background-color: #FCFFFE;
			}
			.active-row {
				background-color: #FFEBDA;
			}
		</style>	
		
		<h:form id="findForm">
			<h:panelGrid columns="5">
				<h:outputLabel id="nachnameLabel"
				               value="#{i18n['find.nachname.prompt']}"
				               for="nachname"/>
				
				<a4j:region>
					<h:inputText id="nachname" value="#{kv.nachname}"
					             required="true"
					             requiredMessage="#{i18n['find.nachname.required']}"/>
				</a4j:region>
				
				<rich:suggestionbox id="nachnameSuggestion"
				                    for="nachname"
				                    minChar="2"
				                    frequency="1"
				                    suggestionAction="#{kv.findNachnamenByPrefix}"
				                    nothingLabel="#{i18n['find.nachname.nothing']}"
				                    var="kunde">
				    <h:column>
						<h:outputText value="#{kunde.nachname}"/>
					</h:column>
				</rich:suggestionbox>

				<a4j:commandButton id="findSubmit"
				                   action="#{kv.find}"
				                   value="#{i18n['find.submit']}"
				                   reRender="selectForm, fehlermeldung, fehlermeldungen"/>

				<a4j:status id="a4jStatus"
				            startText="#{i18n['a4j.inBearbeitung']}"/>
			</h:panelGrid>
			
			<rich:message id="fehlermeldung" for="nachname" errorClass="error" warnClass="warn"/>
		</h:form>
		
		<p>
			<rich:message id="fehlermeldungen" for="selectForm" errorClass="error">
				<f:facet name="errorMarker">
					<h:graphicImage url="/images/error.gif"/>
				</f:facet>
			</rich:message>
		</p>

		<h:form id="selectForm"
				rendered="#{not empty kv.gefundeneKunden}">
			<a4j:region>
				<rich:dataTable id="kundenTabelle" value="#{kv.gefundeneKunden}"
				                var="kunde" binding="#{kv.tabelleCommandButton}"
				                cellspacing="5">
					<f:facet name="header">
                    	<rich:columnGroup>
						</rich:columnGroup>
					</f:facet>
                    
					<h:column>
						<f:facet name="header">
                    		<h:outputText value="#{i18n['tabelle.nr']}"/>
						</f:facet>
						<h:outputText value="#{kv.tabelleCommandButton.rowIndex+1}"/>
					</h:column>
					<h:column>
						<f:facet name="header">
                    		<h:outputText value="#{i18n['tabelle.kunde.id']}"/>
						</f:facet>
						<h:outputText value="#{kunde.id}"/>
					</h:column>
					<h:column>
						<f:facet name="header">
                    		<h:outputText value="#{i18n['tabelle.kunde.nachname']}"/>
						</f:facet>
						<h:outputText value="#{kunde.nachname}"/>
					</h:column>
					<h:column>
						<f:facet name="header">
                    		<h:outputText value="#{i18n['tabelle.kunde.vorname']}"/>
						</f:facet>
						<h:outputText value="#{kunde.vorname}"/>
					</h:column>

					<h:column>
						<h:commandButton id="detailsButton" image="/images/details.gif"
								         action="#{kv.details}" alt="#{i18n['details.button.alt']}"/>
					</h:column>
					<h:column>
						<h:commandButton id="detailsButton2" image="/images/details2.gif"
								         action="#{kv.detailsTabPanel}" alt="#{i18n['details.button.alt2']}"/>
					</h:column>
					<h:column>
						<h:commandButton id="editButton" image="/images/edit.gif"
								         action="#{kv.selectForUpdate}" alt="#{i18n['edit.button.alt']}"/>
					</h:column>
					<h:column>
						<h:commandButton id="deleteButton" image="/images/delete.gif"
								         action="#{kv.delete}" alt="#{i18n['delete.button.alt']}"
								         onclick="return confirm('#{i18n['delete.kunde.bestaetigung']}')"
								         rendered="#{auth.admin}"/>
					</h:column>
				</rich:dataTable>

				<rich:jQuery selector="#kundenTabelle tr:odd" query="addClass('odd-row')" />
				<rich:jQuery selector="#kundenTabelle tr:even" query="addClass('even-row')" />
				<rich:jQuery selector="#kundenTabelle tr"
				             query="mouseover(function(){jQuery(this).addClass('active-row')})"/>
				<rich:jQuery selector="#kundenTabelle tr"
				             query="mouseout(function(){jQuery(this).removeClass('active-row')})"/>
			</a4j:region>
		</h:form>
	</ui:define>
</ui:composition>
